<template>
  <div class="m-istyle">
    <dl id="youlike">
      <dt>猜你喜欢</dt>
      <dd class="active">为你甄选最适合的</dd>
    </dl>
    <ul class="ibody">
      <li v-for="(item, index) in likeList" :key="index" id="like_li">
        <el-card :body-style="{ padding: '0px' }" shadow="never">
          <img :src="item.src" id="like_img"/>
          <div class="lk_text">
               <p style="font-size:16px">{{item.title}}</p>
               <p style="font-size: 12px; color: #999;height: 24px;line-height: 24px;">
                   <span>{{number}}</span>
                   <span>个人评价</span>
               </p>
               <p style="font-size: 12px;color:#999999">{{item.site}}</p>
               <p style="color: #FF6600;font-size:22px" id="texttwo">
                   <span style="font-size: 14px;font-weight: 700;">￥</span>
                    {{item.price}}
                    <span style="font-size: 12px;font-weight: 700;">起</span>
                </p>      
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return{
            likeList:[{
                title:'爱拉屋西饼',
                number:143,
                site:'滦南县中心城区',
                price:9+'.'+6,
                src:"//p1.meituan.net/deal/__44359064__6398751.jpg@267w_150h_1e_1c"
            },{
                title:'川美火锅鸡',
                number:797,
                site:'滦南县中心城区',
                price:99+'.'+0,
                src:"//p0.meituan.net/mogu/6d6bc634533f6375d8b4a7c551f8234482303.jpg@267w_150h_1e_1c"
            },{
                title:'绿洲按摩养生国际',
                number:309,
                site:'滦南县中心城区',
                price:30+'.'+0,
                src:"//p0.meituan.net/merchantpic/49656d3b0d0ce6db4419358ea322dfff350830.jpg@267w_150h_1e_1c"
            },{
                title:'鹏源小芝发艺',
                number:171,
                site:'滦南县中心城区',
                price:10+'.'+0,
                src:"//p1.meituan.net/merchantpic/0ca5df2e6810961a86744a450735e57b284379.jpg@267w_150h_1e_1c"
            },{
                title:'鱼妖烤鱼烧烤',
                number:996,
                site:'滦南县中心城区',
                price:18+'.'+0,
                src:"//p0.meituan.net/deal/902aa5d5b971590d14a2b18b9436a12136693.jpg@267w_150h_1e_1c"
            },{
                title:'戈壁羊庄（滦南店）',
                number:243,
                site:'滦南县中心城区',
                price:88+'.'+0,
                src:"//p0.meituan.net/mogu/ea988d2b6d3b8efcee759002d58aea9870257.jpg@267w_150h_1e_1c"
            },{
                title:'豪大大香鸡排（中大街店）',
                number:1156,
                site:'滦南县中心城区',
                price:9+'.'+9,
                src:"//p1.meituan.net/deal/9942e9eb7100058c159881c65452e5f0291493.jpg@267w_150h_1e_1c"
            },{
                title:'鸭血粉丝（旗舰店）',
                number:2081,
                site:'滦南县中心城区',
                price:15+'.'+5,
                src:"//p1.meituan.net/msmerchant/35b1cf78e1168ab6530967eeeb75f9c9135213.jpg@267w_150h_1e_1c"
            },{
                title:'布拉格蛋糕',
                number:35,
                site:'滦南县中心城区',
                price:7+'.'+9,
                src:"//p0.meituan.net/mogu/12c1906239eedeaba9f30887bf6d950883604.jpg@267w_150h_1e_1c"
            },{
                title:'馋胖肉蟹煲',
                number:304,
                site:'滦南县中心城区',
                price:128+'.'+0,
                src:"//p1.meituan.net/deal/09e6cd44c7fe4dd9a9395d5c87c3faa7500986.jpg@267w_150h_1e_1c"
            },{
                title:'美滋汉堡炸鸡',
                number:18,
                site:'滦南县中心城区',
                price:16+'.'+0,
                src:"//p1.meituan.net/waimaipoi/a46beaff6a59f8716f67f3ad8b33897e30720.jpg@267w_150h_1e_1c"
            },{
                title:'正宗巴蜀香辣虾',
                number:1278,
                site:'滦南县中心城区',
                price:68+'.'+0,
                src:"//p1.meituan.net/deal/e0e60efdb73c1d8b4f1c52428abf74ba42243.jpg@267w_150h_1e_1c"
            },{
                title:'豪仕来牛排披萨（滦南店）',
                number:4579,
                site:'滦南县中心城区',
                price:29+'.'+8,
                src:"//p0.meituan.net/mogu/b3f27ef195f2bf7152feac2d1b1d06d2119729.jpg@267w_150h_1e_1c"
            },{
                title:'三秒魚吧斑鱼火锅',
                number:32,
                site:'滦南县中心城区',
                price:88+'.'+0,
                src:"//p0.meituan.net/mogu/067e31f419ff5df75d08acaa20dabdec111042.jpg@267w_150h_1e_1c"
                
            },{
                title:'面公社',
                number:100,
                site:'滦南县中心城区',
                price:8+'.'+9,
                src:"//p0.meituan.net/deal/083b75f648940536ab3b3260fc10516822897.jpg@267w_150h_1e_1c"
            }

            ]
        }
    }
};
</script>


<style scoped>
#youlike{
    background: linear-gradient(to right, rgb(88, 174, 221) 2%, rgb(66, 191, 205) 97%) rgb(88, 174, 221);
}
#like_li{
    width: 20%;
    height: 246px;
}
#like_img{
    /* width: 100%; */
    height: 120px;
    border-radius:5px
}
.lk_text #texttwo{

    font-family: "numbers" !important;
    letter-spacing: -0.5px;
}
</style>
